<template>
  <div class="productList">
      <div class="productCategory"  v-show="isSingleShow">
         <p class="categoryName">{{singleTitle}}</p>
         <div class="swiper-container" refs="mySwiper" id="single">
             <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index)  in productBoxed">
                   <div class="productBox productRight" v-if="index%3==0" :index="index" @click="getDescribe(item.id)">
                      <img v-bind:src="item.cover" v-on:error.once="moveErrorImg($event)">
                      <span>{{item.name}}</span>
                   </div>
                   <div class="productBox" v-if="index%3==1" :index="index" @click="getDescribe(item.id)">
                      <img :src="item.cover" v-on:error.once="moveErrorImg($event)">
                      <span>{{item.name}}</span>
                   </div>
                   <div class="productBox productLeft" v-if="index%3==2" :index="index" @click="getDescribe(item.id)">
                      <img :src="item.cover" v-on:error.once="moveErrorImg($event)">
                      <span>{{item.name}}</span>
                   </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>  
     </div>
     <div class="productCategory evenList"  v-show="isBoxedShow">
         <p class="categoryName">{{boxedTitle}}</p>
         <div class="swiper-container" refs="mySwiper" id="Boxed">
             <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index)  in productSingle">
                   <div class="productBox productRight" v-if="index%3==0" :index="index"  @click="getDescribe(item.id)">
                      <img :src="item.cover" v-on:error.once="moveErrorImg($event)">
                      <span>{{item.name}}</span>
                   </div>
                   <div class="productBox" v-if="index%3==1" :index="index" @click="getDescribe(item.id)">
                      <img :src="item.cover" v-on:error.once="moveErrorImg($event)">
                      <span>{{item.name}}</span>
                   </div>
                   <div class="productBox productLeft" v-if="index%3==2" :index="index" @click="getDescribe(item.id)">
                      <img :src="item.cover" v-on:error.once="moveErrorImg($event)">
                      <span>{{item.name}}</span>
                   </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>  
     </div>
  </div>
</template>
<script>
export default {
  name: "productList",
  components:{ },
  data () {
    return {
        name:'我要测试首页',
        productBoxed:[],
        productSingle:[],
        singleTitle:'',
        boxedTitle:'',
        isBoxedShow:false,
        isSingleShow:false,
        swiperoption:{
            slidesPerView: 3,
            spaceBetween:0,
             slidesPerGroup: 3,
            loop: true,
            loopFillGroupWithBlank: true,
            pagination: {
              el: '.swiper-pagination',
              clickable: true,
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            }          
        }
    }
  },
  watch: {
      productBoxed: function() {
          this.$nextTick(function(){
            /*现在数据已经渲染完毕*/
             var m;
             for(var i=0;i<=$('.swiper-container').length;i++){
                m = $('.swiper-container').eq(i).attr('id');
                var swiper = new Swiper('#'+m, this.swiperoption);
             }
            if (screen.width <= 768){
                $('.swiper-pagination-bullet').css({"height":"4px","width":"4px"});
             } else{
                return
             }
          }); 
      }    
  },
   methods:{
      getDescribe(productId){
          this.$router.push({
             path: '/productInfo',
             query: {
                 id: productId
             }
          }) 
      },
      moveErrorImg:function (event) {
          event.currentTarget.src = "./images/product3.png";//默认图片
      },
      getData(){
          this.$loading(this.$t("contact.loading"));
          let self = this;  
          var url = '/api/products?include=products.attributes';
          axios.get(url)
          .then(function (response) {
              self.closeLoading();
             if(response.data.data[0].products.data == undefined || response.data.data[0].products.data.length <= 0 ){
                 self.isSingleShow = false;
             }else{
                 self.isSingleShow = true;             
                 self.singleTitle = response.data.data[0].title;
                 self.productSingle = response.data.data[0].products.data;
             }

             if(response.data.data[1].products.data == undefined || response.data.data[1].products.data.length <= 0 ){
                 self.isBoxedShow = false;
             }else{
                 self.isBoxedShow = true;             
                 self.boxedTitle = response.data.data[1].title;
                 self.productBoxed = response.data.data[1].products.data;
             }
          })
          .catch(function (error) {
              console.log(JSON.stringify(error));
          })  
      },
      closeLoading(){
         this.$loading.close();
      }  
   },
   created:function(){
      this.getData();
   }
};

</script>
<style scoped>
.productCategory{width:100%;height:350px;}
.evenList{background:#fff6e9;}
.productCategory>p.categoryName{width:100%;height:78px;line-height:78px;text-align:center;color:#7b5c55;font-size:1.15rem;}
.swiper-container{width:86%;height:265px;}
.productBox{width:68%;height:210px;margin:10px auto;overflow:hidden;}
.productRight{margin:10px 0px 0px auto;}
.productLeft{float:left;margin-left:0px;}
.productBox img{height:156px;display:block;margin:30px auto 0px auto;}
.productBox span{width:100%;display:block;height:30px;line-height:30px;font-size:1rem;text-align:center;color:#7b5c55;overflow: hidden;text-overflow: ellipsis;display: box;display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;}
.swiper-button-prev {background: url(../assets/img/home_up.png)0% 50% no-repeat;background-size:46px 46px;width:46px;height: 46px;left:0px;}
.swiper-button-next {background: url(../assets/img/home_down.png)0% 50% no-repeat;background-size:46px 46px;width:46px;height: 46px;right:0px;}
@media screen and (max-width: 768px) {
 .swiper-button-prev {background: url(../assets/img/home_up.png)0% 50% no-repeat;background-size:20px 20px;width:20px;height:20px;left:0px;}
.swiper-button-next {background: url(../assets/img/home_down.png)0% 50% no-repeat;background-size:20px 20px;width:20px;height: 20px;right:0px;}  
.productCategory{width:100%;height:150px;}
.productCategory>p.categoryName{height:32px;line-height:32px;font-size:0.75rem;}
.swiper-container{width:86%;height:120px;}
.productBox{width:90%;height:80px;/*margin:10px auto;*/overflow:hidden;}
.productBox img{height:54px;display:block;margin:10px auto 0px auto;}
.swiper-pagination-bullet{width:6px;height:6px;}
.productBox span{height:20px;line-height:20px;font-size:0.4rem;}
}
</style>